<template>
  <div>
    <el-container class="body">
      <el-header class="bg">
        <el-row :gutter="20">
          <el-col :span="6" style="padding-left: 40px;display: flex;">
            <div style="margin-right: 10px;">
              日期:
              <el-date-picker v-model="resultDate" type="date" placeholder="选择日期">
              </el-date-picker>
            </div>
            <el-button type="primary" icon="el-icon-search" @click="getGrabCaseResult">查询</el-button>
          </el-col>
        </el-row>
      </el-header>
      <el-divider></el-divider>
      <el-main class="data ele-scrollbar">
        <el-table :data="tableData" border v-loading="tableLoading" max-height="660" :header-cell-class-name="headcolor">
          <el-table-column prop="grabType" label="抢案来源" width="80">
            <template slot-scope="scope">
              <el-tag :type="scope.row.grabType === '人工' ? 'success' : ''">{{
                scope.row.grabType }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="time" label="抢案时间" :formatter="formatTime" width="190">
          </el-table-column>
          <el-table-column prop="contractNo" label="合同编号" width="180">
          </el-table-column>
          <el-table-column prop="result" label="抢案结果" width="180"
            :filters="[{ text: '成功', value: '成功' }, { text: '失败', value: '失败' }]" :filter-method="filterResultTag" filter-placement="bottom-end">
            <template slot-scope="scope">
              <el-tag :type="scope.row.result === '成功' ? 'success' : 'danger'">{{
                scope.row.result }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="failReason" label="失败原因" width="180">
          </el-table-column>
          <el-table-column prop="retryNum" label="重试次数" width="180">
          </el-table-column>
          <el-table-column prop="accountTypeStr" label="合同类型" width="120">
          </el-table-column>
          <el-table-column prop="customerName" label="主借人" width="180">
          </el-table-column>
          <el-table-column prop="dlrSimpleName" label="专营店简称" width="180">
          </el-table-column>
          <el-table-column prop="totalODDays" label="逾期天数" width="180">
          </el-table-column>
          <el-table-column prop="odrentalAmt" label="逾期金额">
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "@/assets/css/scrollbar.css";
const axios = require("axios");
export default {
  name: "pregrabcase",
  data() {
    return {
      resultDate: new Date(),
      tableData: [],
      tableLoading: false
    };
  },
  mounted() {
    //关闭页面的丝带
    if (document.getElementsByTagName("canvas")) {
      let arr = document.getElementsByTagName("canvas");
      for (let i = 0; i < arr.length; i++) {
        arr[i].style.display = "none";
      }
    }
    // 初始化数据
    this.checkPwd();
    // 打开查询
    this.getGrabCaseResult();
  },
  methods: {
    formatTime(row, column) {
      const date = new Date(row.time);
      return date.toISOString().replace('T', ' ').replace('Z', '');
    },
    filterResultTag(value, row){
      return row.result === value;
    },
    // 密码检查
    checkPwd() {
      let _this = this;
      let pwd = localStorage.getItem('pwd');
      if (!pwd) {
        _this.$message.error('请重新登录!');
        setTimeout(() => {
          //退回到登录页
          _this.$router.push("/");
        }, 3000);
      }
    },
    headcolor() {
      return 'head-color';
    },
    // 默认获取本日结果
    async getGrabCaseResult() {
      let _this = this;
      _this.tableLoading = true;
      await axios
        .post("/df/api/getGrabCaseResult", {
          date: _this.resultDate
        })
        .then(function (response) {
          let r = response.data;
          if (r.code == 0) {
            _this.$message({
              message: '查询成功!',
              type: 'success'
            });
            _this.tableData = r.data;
          } else {
            _this.$message.error('查询异常:' + r.msg);
          }
          _this.tableLoading = false;
        });
    },
    //退出系统
    async exit() {
      let _this = this;
      await this.$confirm("即将退出系统, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //退回到登录页
          _this.$router.push("/");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出",
          });
        });
    },
  },
};
</script>

<style>
.head-color {
  background-color: #f5f7fa;
  color: #333;
  font-weight: bold;
}

.body {
  height: 100%;
}

.bg {
  background-color: aliceblue !important;
  height: 20px !important;
}

.header {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.user {
  font-family: "Courier New", Courier, monospace;
  font-size: 20px;
  width: 20%;
}

.progress {
  width: 60%;
  display: flex;
  align-items: center;
  flex-direction: row;
}

.el-progress {
  display: flex;
  align-items: center;
}

.pro-main {
  width: 60%;
}

.pro-box {
  width: 15%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.count {
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: end;
}

.data {
  height: 100%;
}

.main {
  display: flex;
  flex-direction: row;
}

.card {
  height: 100%;
  width: 30%;
  margin: 0 5px 0 5px;
}

.box-card {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.submit {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.trend {
  height: 700px;
  width: 100%;
}

.rank {
  height: 700px;
  width: 100%;
}

.pie {
  height: 700px;
  width: 100%;
}
</style>